<template>
  <div style="display: flex; flex-direction: column; height: 100%; flex: 1;">
    <TableWidget ref="refHiTable" :pagination="pagination" :columns="columns" :load="loadPlatforms"
                 :has-select="false" :hide-pageable="false" :selected="selectedPlats" style="flex: 1">
      <template v-slot:toolHeader>
        <TableSearchWidget ref="refSearch" :search="searchForms">
          <template v-slot:searchTail>
            <div style="display: flex; flex-direction: row; justify-content: center">
              <el-button icon="search" plain round style="padding: 0 20px" @click="refresh" />
            </div>
          </template>
        </TableSearchWidget>
      </template>
      <template v-slot:actionBefore>
        <slot name="actionBefore"/>
      </template>
    </TableWidget>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, toRaw} from "vue";
import {authPlatformQueryPage, grantPlatform} from "@/apis";
import {useStore} from "@/stores";
import TableSearchWidget from "@/widget/TableSearchWidget.vue";
import TableWidget from "@/widget/TableWidget.vue";
import {msgError, msgInfo} from "@/utils/InfoUtil";
import {useCurrent} from "@/utils/UseCurrentFunc";
import {getStateTag, getStateText} from "@/utils/SystemUtil";

const store = useStore();

const platformName = ref();

const refHiTable = ref();
const refSearch = ref();

const selectedPlats = ref([]);

const searchForms = ref([
  {
    type: 'input',
    name: 'name',
    label: `平台名称`,
    size: 'default',
    placeholder: `请输入平台名称`,
    clearable: true,
    defValue: ''
  }
])

const props = withDefaults(defineProps<{
  entry: any,
}>(), {});

const {current} = useCurrent(props.entry.name);

const loadPlatforms = async (params: any) => {
  console.log('--- auth platform', current());
  const userId: string = current().id;
  const result = await authPlatformQueryPage({
    name: platformName.value,
    userId: userId,
    ...params
  });
  if (result && result.data && result.data.data) {
    result.data.data.forEach((item: any) => {
      item.auth = item.props ? item.props.$auth : 0;
      item.disable = item.props ? item.props.$disable : 0;
    })
  }
  return result;
}

const refresh = async () => {
  await refHiTable.value?.refreshData({
    ...refSearch.value?.getSearchParams()
  });
}

const pagination = ref({
  current: 1,
  pageSize: 50,
  total: 0,
});

const columns = ref([
  {
    id: 'id',
    name: '平台ID',
    hideCol: true,
    show: true,
    canEdit: false,
  },
  {
    id: 'name',
    name: '平台名称',
    show: true,
  },
  {
    id: 'auth',
    name: '授权状态',
    show: true,
    tag: 'true',
    tagType: (tag: number) => { return tag ? 'success' : 'danger'; },
    tagText: (tag: number) => { return tag ? '已授权' : '未授权'; },
  },
  {
    id: 'createTime',
    name: '创建时间',
    show: true,
    canEdit: false,
  },
  {
    id: 'operation',
    name: '操作',
    show: true,
    hideCol: true,
    fixed: 'right',
    canEdit: false,
    operations: [
      {
        type: 'confirm',
        name: '授权',
        iconType: 'primary',
        tips: (row: any) => { return row.auth ? '确定解除授权？' : '确定授权平台？' },
        disabled: (row: any) => { return !!row.disable;},
        render: (row: any) => { return row.disable ? '--' : row.auth ? '解除授权' : '授权平台' },
        confirm: async (data: any, row: any) => {
          const result = await grantPlatform({
            userId: current().id,
            grant: row.auth ? 0 : 1,
            platformIds: [row.id]
          });
          if (result.code === 0) {
            msgInfo(row.auth ? '解除授权成功！' : '授权平台成功');
            await refresh();
          } else {
            msgError(result.message);
          }
        },
      }
    ]
  }
]);

onMounted(() => {
  const currentPl: any = toRaw(store.getCurrentPlatform());
})

defineExpose({
  refresh,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
